import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import MyNavLink from '../../../component/MyNavLink'
import Detail from './Detail'
import qs from 'qs'

export default class Message extends Component {
  state = {
    messageArr: [
      {id: '01', title: '消息1'},
      {id: '02', title: '消息2'},
      {id: '03', title: '消息3'}
    ]
  }
  pushShow = (w) => {
    // push跳转 + 携带params参数
    // this.props.history.push(`/home/message/detail/${w.id}/${w.title}`)

    // push跳转 + 携带search参数
    // this.props.history.push(`/home/message/detail?${qs.stringify(w)}`)

    // push跳转 + 携带state参数
    // this.props.history.push({pathname:'/home/message/detail', state: {...w}})
    this.props.history.push('/home/message/detail', w)

  }
  replaceShow = (w) => {
    // replace跳转 + 携带params参数
    // this.props.history.replace(`/home/message/detail/${w.id}/${w.title}`)

    // replace跳转 + 携带search参数
    // this.props.history.replace(`/home/message/detail?${qs.stringify(w)}`)

    
    // replace跳转 + 携带state参数
    // this.props.history.replace({pathname:'/home/message/detail', state: {...w}})
    this.props.history.replace('/home/message/detail', w)

  }

  back = () => {
    this.props.history.goBack()
  }
  forward = () => {
    this.props.history.goForward()
  }
  go = () => {
    this.props.history.go(-2)
  }
  render() {
    return (
      <div>
          <ul>
            {this.state.messageArr.map(w => {
              return (
                <li key={w.id}>
                  {/* 向路由组件传递params参数 */}
                  {/* <MyNavLink to={`/home/message/detail/${w.id}/${w.title}`}>{w.title}</MyNavLink>
                  <button onClick={() => this.pushShow(w)}>push查看</button>
                  <button onClick={() => this.replaceShow(w)}>replace查看</button> */}

                  {/* 向路由组件传递search参数 */}
                  {/* <MyNavLink replace={true} to={`/home/message/detail?id=${w.id}&title=${w.title}`}>{w.title}</MyNavLink>
                  <button onClick={() => this.pushShow(w)}>push查看</button>
                  <button onClick={() => this.replaceShow(w)}>replace查看</button> */}

                   {/* 向路由组件传递state参数 */}
                   <MyNavLink to={{pathname:'/home/message/detail', state: {id: w.id, title: w.title}}}>{w.title}</MyNavLink>
                   <button onClick={() => this.pushShow(w)}>push查看</button>
                   <button onClick={() => this.replaceShow(w)}>replace查看</button>
                </li>
              )
            })}
          </ul>
          <div>
                {/* 声明接收params参数 */}
                {/* <Route path='/home/message/detail/:id/:title' component={Detail} /> */}

                {/* search参数无需声明接收，正常注册路由即可 */}
                {/* <Route path='/home/message/detail' component={Detail} /> */}

                {/* state参数无需声明接收，正常注册路由即可 */}
                <Route path='/home/message/detail' component={Detail} />
                <div>
                   <button onClick={this.back}>回退</button>
                   <button onClick={this.forward}>前进</button>
                   <button onClick={this.go}>go</button>
                </div>
          </div>
      </div>
    )
  }
}
